import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      warningTypeEchart: null,
      warnTypeListData: [],
      typeColor: {
        '1': '#2cdef2',
        '4': '#abd454',
        '5': '#29a2ff',
        '6': '#9f81ff'
      },
      warningTypeOption: {
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(9, 37, 56, 0.5)',
          extraCssText: 'box-shadow: 0 0 5px 2px rgba(8, 69, 69) inset;'
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['35%', '75%'],
            center: ['50%', '50%'],
            roseType: 'area',
            data: [],
            itemStyle: {
              shadowColor: 'rgba(0, 0, 0, 0.5)',
              shadowBlur: 10
            },
            label: {
              formatter: '{b|{b}}\n{hr|}\n{d|{c}次}',
              rich: {
                b: {
                  fontSize: 14,
                  color: '#fff',
                  align: 'center',
                  padding: 4
                },
                hr: {
                  borderColor: '#00e8ff',
                  width: '100%',
                  borderWidth: 1,
                  height: 0
                },
                d: {
                  fontSize: 14,
                  padding: [0, 0, 7, 0],
                  color: '#00e8ff',
                  align: 'left'
                },
                c: {
                  fontSize: 14,
                  color: '#fff',
                  align: 'left',
                  padding: 4
                }
              }
            }
          }
        ]
      }
    }
  },
  computed: {
    ...mapGetters({
      incomingAIVideoNode: 'incomingAIVideoNode'
    })
  },
  watch: {
    incomingAIVideoNode (item) {
      this.incomingWarningType(item)
    }
  },
  methods: {
    initWarningType () {
      this.warningTypeOption.series[0].data = this.warnTypeList.map((item) => {
        return {
          value: item.value,
          name: item.name,
          itemStyle: {color: this.typeColor[item.id]}
        }
      }).filter(item => item.value)
      this.warningTypeEchart = this.$echarts.init(this.$refs.warningType)
      this.warningTypeEchart.setOption(this.warningTypeOption)
    },
    incomingWarningType (item) {
      for (let source of this.warnTypeList) {
        if (Number.parseInt(source.id) === Number.parseInt(item.type)) {
          source.value++
          break
        }
      }
      let items = this.warnTypeList.map((item) => {
        return {
          value: item.value,
          name: item.name,
          itemStyle: {color: this.typeColor[item.id]}
        }
      }).filter(item => item.value)
      this.warningTypeEchart.setOption({
        series: {
          name: '',
          data: items
        }
      })
    }
  }
}
